import type { GlobalStoreType } from "@/typings/stores";
import { create } from "zustand";
import { createJSONStorage, devtools, persist } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";

const initialState: GlobalStoreType.stateType = {
  // 布局风格 (vertical | classic | transverse | columns)
  layout: "columns",
  // 主题颜色
  colorPrimary: "#7166f0",
  // 夜间模式
  isDark: false,
  // 菜单拆分
  menuSplit: false,
  // 底部备案信息
  footer: true,
  // 当前页面是否为全屏
  maximize: false,
  // 侧边栏反转颜色
  siderInverted: true,
  // 头部反转颜色
  headerInverted: true,
  // 灰色模式
  isGrey: false,
  // 色弱模式
  isWeak: false,
  // 快乐模式
  isHappy: true,
  // 菜单是否手风琴
  accordion: true,
  // 是否展示面包屑导航
  breadcrumb: true,
  // 是否展示面包屑导航图标
  breadcrumbIcon: true,
  // 是否展示标签导航
  tabs: true,
  // 是否展示标签导航图标
  tabsIcon: true,
  // 标签导航是否支持拖拽
  tabsDrag: true,
  // 主题抽屉模态框显示状态
  themeDrawerVisible: false
};

const actions = (set: GlobalStoreType.settersStoreType) => {
  const setGlobalState = <T extends keyof GlobalStoreType.stateType>(payload: { key: T; value: GlobalStoreType.stateType[T] }) => {
    set((state: GlobalStoreType.stateType) => {
      state[payload.key] = payload.value;
    });
  };

  return { setGlobalState };
};

const devtoolsConfig = { name: "REACT_APP_GLOBAL_STORAGE", enabled: import.meta.env.VITE_APP_REDUX_DEVTOOLS === "true" };
const persistConfig = { name: "REACT_APP_GLOBAL_STORAGE", storage: createJSONStorage(() => localStorage) };
export const useGlobalStore = create<GlobalStoreType.storeType>()(
  devtools(
    persist(
      immer((set) => ({
        ...initialState,
        ...actions(set)
      })),
      persistConfig
    ),
    devtoolsConfig
  )
);
